@import "./item.vars";

// Item
// --------------------------------------------------

ion-item {
  @include font-smoothing();

  display: block;
}

.item {
  @include border-radius(0);
  @include margin(0);
  @include padding(0);
  @include text-align(initial);

  display: flex;
  overflow: hidden;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: $item-min-height;

  border: 0;
  outline: none;

  font-weight: normal;
  line-height: normal;
  text-decoration: none;
  color: inherit;
}

.item-inner {
  @include margin(0);
  @include padding(0);

  display: flex;
  overflow: hidden;

  flex: 1;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;

  min-height: inherit;

  border: 0;
}

.input-wrapper {
  display: flex;
  overflow: hidden;

  flex: 1;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;

  text-overflow: ellipsis;
}

.item[no-lines],
.item.item[no-lines] .item-inner {
  border: 0;
}

ion-item-group {
  display: block;
}

[vertical-align-top],
.input.item {
  align-items: flex-start;
}

.item-cover {
  @include position(0, null, null, 0);

  position: absolute;

  width: 100%;
  height: 100%;

  background: transparent;
  cursor: pointer;
}

.item > ion-icon,
.item-inner > ion-icon {
  font-size: 1.6em;
}

.item .button {
  @include margin(0);
}

.item-disabled {
  cursor: default;
  opacity: .4;

  pointer-events: none;
}
